<template>
  <el-form
      ref="formDataRef"
      :model="formData"
      :rules="formValidRules"
      style="width:100%"
      label-position="top">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="旧密码" prop="oldPwdCode"
                      :rules="[
        {
          required: true,
          message: '请输入旧密码',
          trigger: 'blur',
        }
      ]">
          <el-input v-model="formData.oldPwdCode" type="password"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="新密码" prop="password"
                      :rules="[
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        }
      ]">
          <el-input v-model="formData.password" type="password"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="确认密码" prop="rePassword"
                      :rules="[
        {
          required: true,
          message: '请输入确认密码',
          trigger: 'blur',
        }
      ]">
          <el-input v-model="formData.rePassword" type="password"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
// @ts-ignore
import {ElMessage, FormInstance, FormRules} from 'element-plus'
//定义组件名称
defineOptions({
  name: "UserPasswordReset"
})

//接收的参数
const props = defineProps({
  params: {required: true, type: Object, default: {}}
});

interface Modal {
  id?: string,
  password?: string,
  oldPwdCode?: string,
  rePassword?: string
}

//验证密码
const validatePass = (rule: any, value: any, callback: any) => {
  let passRegular = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!passRegular.test(value)) {
    //密码不通过的逻辑
    callback(new Error('密码必须不少于8包含大小写,数字,特殊字符!'))
  } else {
    if (formData.value.rePassword !== '') {
      if (!formDataRef.value) return
      formDataRef.value.validateField('checkPasswd', () => null)
    }
    callback()
  }
}
//确认密码
const checkPasswd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入确认密码'))
  } else if (value !== formData.value.password) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const formDataRef = ref<any>()
// 表单 验证
let formValidRules = reactive<FormRules>({
  // @ts-ignore
  password: [{validator: validatePass, trigger: 'blur'}],
  rePassword: [{validator: checkPasswd, trigger: 'blur'}]
});
// @ts-ignore
const {proxy} = getCurrentInstance()

// 表单 数据
let formData = ref<Modal>({})
/**
 * 按钮点击事件
 * @param btnType  按钮类型
 * @param params   参数
 * @param rootContext 弹窗父页面
 * @param modelContext  弹窗窗口
 */
const clickEvent = (btnType: string, params: any, rootContext: any, modelContext: any) => {
  switch (btnType) {
    case 'submit':
      formDataRef.value?.validate((valid: any, fields: any) => {
        if (valid) {
          proxy.$http.post('/user-center/user/saveNewPw', {
            password: formData.value.password,
            id: props.params.id,
            oldPwdCode: formData.value.oldPwdCode,
          }).then(function (api: any) {
            console.log(api);
            if (api.code == 0) {
              ElMessage({
                message: '操作成功',
                type: 'success',
              })
              modelContext.closeModal();
            } else {
              ElMessage({
                message: api.msg,
                type: 'error',
              })
            }
          });
          console.log('submit!')
        }
      });
      break;
    case 'reset':
      formData.value = {}
      formDataRef.value?.resetFields();
      break;
  }
}
defineExpose({
  clickEvent
});
</script>

<style scoped>

</style>